import React, { FC, useEffect } from 'react'
import {inject,observer} from "mobx-react"
import Mytitle from '../../../../components/Mytitle'
import { List, Avatar, Tooltip, Button, Popconfirm } from 'antd';
import { baseURL } from '../../../../api/request';
import './index.scss'
import {Link, useNavigate} from "react-router-dom"
import {

  DeleteOutlined,
  CloseCircleOutlined,
  SearchOutlined
 
  
} from '@ant-design/icons';
import { ajax } from '../../../../api';

 const Listadvise:FC<any>=({
  advise
 })=> {
  const navigate = useNavigate()
   const {adviseList,getAdviseList,changeadvise}=advise
   useEffect(()=>{
      getAdviseList()
   },[])

   //点击查看，携带——id进入详情页
  const gotoDetailed=(item:any)=>{
    navigate('/home/mine/advise/detailed/'+item._id)
  }

  //点击确认删除
  const confirmDel=async(item:any)=>{
    let res = await ajax.advisedelete({_id:item._id})
    if(res.code==200){
      //过滤掉被删除的数据
      var list = adviseList.filter((v:any)=>v._id!=item._id);
      changeadvise(list)
    }
  }
  return (
    <div style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
        <Mytitle text="意见列表"></Mytitle>
        <div style={{width:600,position:"relative",border:"1px solid #333",borderRadius:"10px",padding:"10px",height:"400px"}}>
             {
               adviseList&& <List
               itemLayout="vertical"
               pagination={{
                onChange: page => {
                  console.log(page);
                },
                pageSize: 4,
              }}
              split={true}
              size='small'
               dataSource={adviseList}
               renderItem={(item:any) => (
                 <List.Item>
                  <List.Item.Meta
                  avatar={item.info.avatar?<Avatar src={item.info.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>}
                  title={
                  <p style={{display:"flex",justifyContent:"space-between"}}>
                    <span style={{display:"inline-block"}}>{item.title}</span>
                  <span style={{display:"inline-block"}}>
                      <Tooltip title="点击查看">
                    <Button  onClick={()=>gotoDetailed(item)} size="small" shape="circle" icon={<SearchOutlined />} type="primary"></Button>
                    </Tooltip>

                    <Popconfirm
                title="确定删除吗?"
                onConfirm={()=>confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Tooltip title="点击删除">
                  <Button type="primary"  shape="circle" danger icon={<CloseCircleOutlined />} size="small" />
                </Tooltip>
              </Popconfirm>

                  </span>
                  </p>
                }
                  description={ <div dangerouslySetInnerHTML={{__html:item.content }}>
                              {/* 转义成html */}
                  </div>}
                  />
                 </List.Item>
                 
               )}
               />
             }
        </div>
    </div>
  )
}
export default inject('advise')(observer(Listadvise))